<template>
  <div class="root">
    <!-- 采购单基础信息 -->
    <div class="base-info">
      <span>采购单号:</span> {{ purchase.purchaseCode }}
      <span>供应商:</span> {{ purchase.supplier }}
    </div>

    <!-- 采购原料表格 -->
    <div class="table-title">采购原料</div>
    <el-table :data="purchase.purchaseDetail2s" border stripe style="width: 100%">
      <el-table-column prop="mcode" label="原料编码" />
      <el-table-column prop="name" label="原料名称" />
      <el-table-column prop="warmarea" label="存放温区" />
      <el-table-column prop="spec" label="原料规格" />
      <el-table-column label="采购数量">
        <template v-slot="{ row }">
          {{ row.num }} {{ row.unit || '' }}
        </template>
      </el-table-column>
      <el-table-column prop="store" label="已入库数量" />
      <el-table-column label="操作" width="180">
        <template v-slot="{ row }">
          <el-button type="primary" @click="toAdd(row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 到货原料表格 -->
    <div class="table-title">到货原料</div>
    <el-table :data="arrival" border stripe style="width: 100%">
      <el-table-column prop="mcode" label="原料编码" />
      <el-table-column prop="name" label="原料名称" />
      <el-table-column prop="warmarea" label="存放温区" />
      <el-table-column prop="spec" label="原料规格" />
      <el-table-column label="采购数量">
        <template v-slot="{ row }">
          {{ row.num }} {{ row.unit || '' }}
        </template>
      </el-table-column>
      <el-table-column label="到货数量" width="270">
        <template v-slot="{ row }">
          <el-input 
            v-model.number="row.arrivalNum" 
            style="width: 80px; margin-right: 5px;" 
            placeholder="数量"
          />
          <span>{{ row.unit || '' }}</span>
        </template>
      </el-table-column>
  
  
      <el-table-column prop="note" label="备注" width="180">
        <template v-slot="{ row }">
          <el-input v-model="row.note" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="{ row }">
          <el-button type="primary" @click="todel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 其他表单 -->
    <div class="other-form">
      <el-row>
        <el-col :span="12">
          <span>卸货库区:</span>
          <el-input v-model="arrivalForm.area" style="width: 300px;" />
        </el-col>
        <el-col :span="12">
          <span>备注：</span>
          <el-input v-model="arrivalForm.note" style="width: 300px;" />
        </el-col>
      </el-row>
    </div>

    <el-button type="primary" @click="submit" style="margin-top: 20px;">提交</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { queryDetailById } from '@/api/arrival/purchase.js'
import { save } from '@/api/arrival/arrival.js'


// 响应式数据
const route = useRoute()
const router = useRouter()
const purchase = ref({})
const arrival = ref([])
const arrivalForm = ref({ area: '', note: '' })

// 添加采购原料
const toAdd = (row) => {
  const newRow = { ...row, note: '' ,arrivalNum:0};

  // 检查重复
  const isDuplicate = arrival.value.some(item => item.mcode === newRow.mcode);
  if (isDuplicate) {
    ElMessage.warning('该原料已添加');
    return;
  }
  
  arrival.value.push(newRow);
  ElMessage.success('添加成功');
};


// 删除
const todel = (row) => {
  const index = arrival.value.findIndex(item => item.mcode === row.mcode);
  if (index !== -1) {
    arrival.value.splice(index, 1);
    ElMessage.success('删除成功');
  }
};

// 提交
const submit = async () => {
  if (arrival.value.length === 0) {
    ElMessage.warning('请至少添加一种到货原料');
    return;
  }
  
  arrivalForm.value.arrivalDetailList = arrival.value;
  const { id, supplier, purchaseUser, purchaseDate } = purchase.value;
  arrivalForm.value.supplierName = supplier;
  arrivalForm.value.purchaseUser = purchaseUser;
  arrivalForm.value.purchaseDate = purchaseDate;
  arrivalForm.value.type = 1;
  arrivalForm.value.purchaseId = id;
  
  try {
    const res = await save(arrivalForm.value);
    if (res.code === 200) {
      ElMessage.success('提交成功');
      router.push('/arrival/record');
    }
  } catch (error) {
    ElMessage.error('提交失败，请重试');
  }
};

// 初始化
const init = async () => {
  const id = route.query.id;
  if (id) {
    const res = await queryDetailById(id);
    if (res.code === 200) {
      purchase.value = res.data;
    }
  }
};

onMounted(init);
</script>

<style scoped>
.root {
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.base-info {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.base-info span {
  margin-right: 20px;
  font-size: 14px;
}

.table-title {
  margin: 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.quantity-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.unit-text {
  color: #666;
  white-space: nowrap;
}

.total-text {
  margin-left: 10px;
  color: #333;
  font-weight: 500;
}

.other-form {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.other-form span {
  display: inline-block;
  width: 80px;
}
</style>
